<template>
  <div id="Person">
    <div class="person_top person_common">
       <div class="container_top">
        <div class="img">
            <img src="https://bbs-static.miyoushe.com/communityweb/upload/c9d11674eac7631d2210a1ba20799958.png" alt="">
        </div>
        <div class="info">
            <div class="name">{{name}}</div>
            <div class="label">{{label}}</div>
            <div class="signature">{{signature}}</div>
        </div>
        <div class="button">
            <el-button type="primary">修改</el-button>
        </div>
       </div>
       <div class="container_bottom">
        <ul class="account_data">
            <li>{{fanAccount}}&nbsp;粉丝</li>
            <li>{{regardAccount}}&nbsp;关注</li>
            <li>{{likeAccount}}&nbsp;获赞</li>
        </ul>
       </div>
    </div>
    <div class="person_bottom">
        <div class="person_bottom_left person_common">
            <div>个人中心</div>
            <ul  @click="goRouter(index)" v-for="(item,index) in personalCenterList" :key="index">
               <li><span :class="icos[index]"></span>&nbsp;&nbsp;{{item}}</li>
            </ul>
        </div>
        <div class="person_bottom_right person_common">
            <div>我的发帖</div>
            <div class="routerView">
                <router-view class="routerViewContainer"></router-view>
            </div>
    
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "Person",
    data() {
        return {
            id: 1,
            name: '何必陶',
            label: '帅哥',
            signature: '该用户没有留下签名...',
            fanAccount: 0,
            regardAccount: 0,
            likeAccount: 0,
            personalCenterList: ['我的发帖','我的评论','我的收藏','我的粉丝','我的关注','退出登录'],
            goRouterLists: ['myPost'],
            icos: ['icon-file-text','icon-bubble2','icon-star-empty','icon-user-check','icon-heart','icon-exit']
        }
    },
    methods: {
        async getUserData(id) {
            await this.$axios.post('/test',{name: 1,age: 18,aa: 1}).then( (res) => {
                console.log(res.data);
            }).catch( (err) => {

            })
        },
        goRouter(index) {
            if(index>0) return;
            this.$router.push(`/domain/${this.goRouterLists[index]}`)
        },
    },
    created() {
        this.getUserData(this.id);
    }
}
</script>

<style scoped>
#Person {
    margin-top: 100px;
    width: 60vw;
}

.person_common {
    background-color: #fff;
    z-index: 1;
    position: relative;
}

.person_top {
    width: 100%;
    padding: 20px;
}

.person_top .container_top {
    width: 100%;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.person_top .container_bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.person_top .img {
    flex: 1;
}

.person_top .img img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    float: left;
}

.person_top .info {
    flex: 4;
    margin-left: 20px;
    font-size: 15px;
}

.person_top .info>div {
    margin: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.name {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
}

.person_top .button {
    flex: 1;
}

.person_top .button>button {
    float: right;
}

.container_bottom .account_data {
    margin-top: 20px;
}

.container_bottom .account_data>li{
    display: inline-block;
    font-size: 15px;
    margin: 0 20px;
}

.person_bottom {
    width: 100%;
    margin-top: 20px;
}

.person_bottom .person_bottom_left {
    width: 30%;
    float: left;
}

.person_bottom .person_bottom_right {
    width: 68%;
    float: right;
}

.person_bottom .person_bottom_left>div{
    width: 100%;
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
}

.person_bottom .person_bottom_left>ul>li{
    line-height: 50px;
    font-size: 14px;
    padding-left: 30px;
    cursor: pointer;
    opacity: .6;
}

.person_bottom .person_bottom_left>ul>li:hover {
    color: #00c3ff;
}

.person_bottom .person_bottom_right>div:nth-child(1){
    width: 100%;
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
}

.routerView {
    width: 100%;
    height: 500px;
    background-color: #fff;
    padding: 10px;
}
</style>